<template>
  <div class="layout" style="height:100%" flex="dir:top">
    <app-nav />
    <!-- <keep-alive>
      <router-view style="flex:1" />
    </keep-alive> -->

    <router-view style="flex:1" />
    <appFooter />
    <dialog111
      v-model="dialogVisible"
      :dialog-title="dialogTitle"
      width="500px"
      @close="handleClose"
    >
      <customTable
        v-if="!!activePath"
        v-loading="loading"
        :last-column-config="lastColumnConfig"
        border
        :page-config="pageConfig"
        :table-style="{background:'none',color:'#fff'}"
        :table-list="tableList"
        :header-cell-style="{background:'none',color:'#aaa'}"
        :header-row-style="{background:'none'}"
        :row-style="{background:'none'}"
        :cell-style="{background:'none'}"
        :table-columns="tableColumns"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        @change="handlePageChange"
      >
        <div slot="handlerDom" flex="main:justify cross:center">
          <el-link type="primary">定位</el-link>
        </div>
      </customTable>
      <div>我是详细信息我是详细信息我是详细信息我是详细信息我是详细信息</div>
    </dialog111>
  </div>
</template>

<script>
import appNav from './header'
import appFooter from './footer'
import dialog111 from '@/components/dialog'
import customTable from '@/components/customTable'
import { queryEqui } from '@/api/home'
export default {
  name: 'Layout',
  components: {
    appNav,
    appFooter,
    dialog111,
    customTable
  },
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '',
      pageConfig: {
        pageSize: 6
      },
      activePath: '',
      loading: false,
      tableList: [],
      tableColumns: [
        { prop: 'eqName', hearderLabel: '设备名字' },
        { prop: 'eqCreationTime', hearderLabel: '创建时间' },
        { prop: 'eqUpdateTime', hearderLabel: '更新时间' },
        { prop: 'eqState', hearderLabel: '设备状态' },
        { prop: 'eqType', hearderLabel: '设备类型' }
      ],
      lastColumnConfig: {
        headerLabel: '操作',
        headerAlign: 'left',
        width: '100px'
      }
    }
  },
  created() {
    this.$EventBus.$on('openDialog', ({ name, path }) => {
      this.dialogVisible = true
      this.dialogTitle = name
      this.activePath = path
    })
  },
  methods: {
    handleClose() {
      this.$EventBus.$emit('navInit')
      this.dialogVisible = false
    },
    handlePageChange(obj) {
      // const arr = new Array(obj.pageSize).fill(null).map((item, index) => ({
      //   username: '型号' + ((obj.currentPage - 1) * obj.pageSize + index),
      //   roleName: '楼顶左上角',
      //   organization: '运行中'
      // }))
      // console.log(this.activePath)
      if (!this.activePath) return
      this.loading = true
      queryEqui({ pageSize: obj.pageSize, pageNum: obj.currentPage }).then(
        res => {
          this.tableList = res.content
          obj.total = res.totalSize
          this.loading = false
        }
      )

      // new Promise(resolve => {
      //   setTimeout(() => resolve({ data: arr, total: 25 }), 500)
      // }).then(res => {
      //   this.tableList = res.data
      //   obj.total = res.total
      //   this.loading = false
      // })
    }
  }
}
</script>
